<template>
  <!-- ref在模板中使用也不需要.value -->
  <p>{{ ageRef }} {{ state.name }}</p>
</template>

<script>
import { ref, reactive } from "vue";

export default {
  name: "Ref",
  setup() {
    const ageRef = ref(20); // 值类型 响应式
    const nameRef = ref("wc");

    // ref可以写在reactive中的，此时不需要.value
    const state = reactive({
      name: nameRef,
    });

    setTimeout(() => {
      console.log("ageRef", ageRef.value);
      ageRef.value = 25; // .value 修改值
    }, 1500);

    return {
      ageRef,
      state,
    };
  },
};
</script>